<template>
	<view class="answer-report-container home-wrap" :style="{ 'background':'#fff url('+HTTP_IMG_URL()+'j/top_bg.png) no-repeat','background-size': '100%'}">
		<shopro-navbar :isBack="true" :source="'card'" :background="{'background':'url('+HTTP_IMG_URL()+'j/top_bg.png) no-repeat','background-size': '100% 100%'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width:85%; text-align: center; padding-left: 20rpx; height: 100%;">
				答题报告
			</text>
		</shopro-navbar>
		<!-- 分数和图标 -->
		<view class="score-row">
			<view class="score-block">
				<text class="score">{{ answerObj.score }}</text>
				<text class="score-label">得分</text>
			</view>
			<image class="report-icon" :src="HTTP_IMG_URL()+'/static/images/jilu.png'" mode="widthFix" />
		</view>
		<!-- 统计 -->
		<view class="stat-box">
			<view class="stat-item">
				<text class="stat-label">正确题数</text>
				<text class="stat-value">{{ answerObj.right_count }}</text>
			</view>
			<view class="stat-item">
				<text class="stat-label">错误题数</text>
				<text class="stat-value">{{ answerObj.error_count }}</text>
			</view>
			<view class="stat-item">
				<text class="stat-label">未做题数</text>
				<text class="stat-value">{{ answerObj.nul_sum }}</text>
			</view>
		</view>
		<!-- 日历答题卡 -->
		<view class="calendar-box">
			<view class="calendar-grid">
				<view
					v-for="(item, index) in answerSheet"
					:key="index"
					:class="['calendar-cell', item.is_right === 1 ? 'correct' : 'wrong', { selected: selectedNum === index }]"
					@click="selectNum(index)">
					{{ index + 1 }}
				</view>
			</view>
			<view class="calendar-legend">
				<view class="legend-item"><view class="dot correct"></view> 正确</view>
				<view class="legend-item"><view class="dot wrong"></view> 错误</view>
				<view class="legend-item"><view class="dot undone"></view> 未做</view>
			</view>
		</view>
		<!-- 查看解析按钮 -->
		<view class="btn-area">
			<view class="analysis-btn" @click="goAnalysis">查看解析</view>
		</view>
	</view>
</template>

<script>
import { HTTP_IMG_URL } from "@/config/app";
export default {
	data() {
		return {
			answerSheet: [],
			selectedNum: null,
			answerObj: {}
		};
	},
	onLoad(options) {
		this.answerObj = JSON.parse(options.answerStr);
		console.log(this.answerObj, 'this.answerObj');
		this.answerSheet = this.answerObj.detail;
	},
	methods: {
		HTTP_IMG_URL(){
			return HTTP_IMG_URL
		},
		selectNum(num) {
			this.selectedNum = num;
		},
		goAnalysis() {
			// 跳转到解析页或弹窗
			const cid = uni.getStorageSync('catId');
			uni.navigateTo({
				url: '/pages/questionnaire/zuoti?catId=' + cid,
			});
		}
	},
};
</script>

<style lang="scss">
.answer-report-container {
	min-height: 100vh;
	background: linear-gradient(180deg, #eaf2ff 0%, #fff 60%);
	padding-bottom: 40rpx;
}
.report-header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 32rpx 0 0 0;
}
.back-btn {
	position: absolute;
	left: 32rpx;
	top: 32rpx;
	font-size: 40rpx;
	color: #333;
}
.report-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #222;
}
.score-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 40rpx 48rpx 0 48rpx;
}
.score-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.score {
	font-size: 80rpx;
	color: #2563eb;
	font-weight: 700;
	line-height: 1;
}
.score-label {
	font-size: 26rpx;
	color: #888;
	margin-top: 8rpx;
}
.report-icon {
	width: 160rpx;
	margin-left: 20rpx;
}
.stat-box {
	background: #fff;
	border-radius: 24rpx;
	margin: 32rpx 32rpx 0 32rpx;
	display: flex;
	justify-content: space-between;
	box-shadow: 0 2rpx 12rpx #e6eaf0;
	padding: 32rpx 0;
}
.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.stat-label {
	font-size: 26rpx;
	color: #888;
}
.stat-value {
	font-size: 36rpx;
	color: #222;
	font-weight: 600;
	margin-top: 8rpx;
}
.calendar-box {
	background: #fff;
	border-radius: 24rpx;
	margin: 32rpx 32rpx 0 32rpx;
	box-shadow: 0 2rpx 12rpx #e6eaf0;
	padding: 32rpx 0 0 0;
}
.calendar-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 0 32rpx;
}
.calendar-cell {
	width: 64rpx;
	height: 64rpx;
	margin-bottom: 24rpx;
	margin-right: 20rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	font-weight: 500;
	background: #f6f6f8;
	color: #3ac569;
	border: 2rpx solid transparent;
	transition: all 0.2s;
}
.calendar-cell.correct {
	background: #e6f9ed;
	color: #3ac569;
}
.calendar-cell.wrong {
	background: #ffeaea;
	color: #ff5a5a;
}
.calendar-cell.undone {
	background: #f6f6f8;
	color: #bbb;
}
.calendar-cell.selected {
	border: 2rpx solid #2563eb;
	box-shadow: 0 2rpx 8rpx #eaf2ff;
}
.calendar-legend {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 16rpx 32rpx 24rpx 32rpx;
	font-size: 24rpx;
	color: #888;
	gap: 32rpx;
}
.legend-item {
	display: flex;
	align-items: center;
	margin-right: 32rpx;
}
.dot {
	width: 24rpx;
	height: 24rpx;
	border-radius: 50%;
	margin-right: 8rpx;
	display: inline-block;
}
.dot.correct {
	background: #3ac569;
}
.dot.wrong {
	background: #ff5a5a;
}
.dot.undone {
	background: #bbb;
}
.btn-area {
	margin: 64rpx 32rpx 0 32rpx;
}
.analysis-btn {
	position: fixed;
	bottom: 30rpx;
	width: 90%;
	background: #2563eb;
	color: #fff;
	border-radius: 34rpx;
	font-size: 32rpx;
	padding: 24rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
</style>
